<template>
  <view class="container">
    <scroll-view scroll-y="true" style="width: 100%; height: 100vh">
      <swiper :autoplay="true" :interval="3000" :duration="1000" style="margin-top: 180rpx; margin-bottom: 60rpx">
        <swiper-item v-for="(item, index) in imglist" :key="index" @click="goarticle(item.content)">
          <image :src="imgUrl + item.url" mode="aspectFill" style="width: 100%; height: 100%; vertical-align: bottom"></image>
        </swiper-item>
      </swiper>
      <!-- 头部 -->
      <view class="headerbgc" :style="[top]">
        <image src="../../../static/icon/place.png" mode="" style="width: 28rpx; height: 32rpx; margin: 0 10rpx 0 30rpx"></image>
        <view style="font-size: 28rpx; color: #fff; margin-right: 10rpx; width: 90rpx; text-overflow: ellipsis; overflow: hidden; white-space: nowrap" @click="goposition">
          {{ city }}
        </view>
        <view style="display: flex; align-items: center; position: relative">
          <image src="../../../static/icon/search.png" mode="" style="width: 28rpx; height: 28rpx; position: absolute; left: 30rpx; z-index: 2"></image>
          <input type="text" class="ipt" placeholder="搜索教师称或科目" placeholder-style="color:#fff" placeholder-class="txtwhiite" @click="gosearch" />
        </view>
      </view>
      <!-- 版心模块 -->
      <view class="itembox">
        <image src="../../../static/img/homeyuyueteacher.png" mode="aspectFill" style="width: 340rpx; height: 180rpx; margin-right: 30rpx" @click="goxuebadaojia"></image>
        <image src="../../../static/img/teacherrz.png" mode="aspectFill" style="width: 340rpx; height: 180rpx" @click="gojsrz"></image>
      </view>
      <!-- :style="{ marginTop: subjectlist.length != 0 ? '200rpx' : '0rpx' }" -->
      <!-- 上课列表 -->
      <view class="listtitle" :style="{ marginTop: subjectlist.length != 0 ? '280rpx' : '0rpx' }" v-if="subjectlist.length != 0">上课列表</view>
      <scroll-view
        scroll-y="true"
        v-if="subjectlist.length != 0"
        style="box-sizing: border-box; width: 710rpx; height: 320rpx; background: #f9f9f9; border-radius: 20rpx 20rpx 20rpx 20rpx; margin: 20rpx; padding: 0 30rpx"
      >
        <view class="list" v-for="(item, index) in subjectlist" :key="index">
          <view class="item2">
            <view class="top">{{ item.time_slot }}</view>
            <view class="bottom">{{ item.grade_name + '-' + item.subject_name }}</view>
          </view>
          <view class="item2">
            <view class="top">{{ item.byname }}</view>
            <view class="bottom">{{ item.week_time }}</view>
          </view>
          <view class="item2" style="width: 180rpx; height: 120rpx; background: #3553e8; border-radius: 20rpx 20rpx 20rpx 20rpx; color: #fff">
            <view class="top" v-if="item.agotime.agotimeIs == 1">距上课还有</view>
            <view class="bottom">{{ item.agotime.agotimeIs == 2 ? item.agotime.agotime + '上课' : item.agotime.agotime }}</view>
            <view style="display: flex" v-if="item.agotime.agotimeIs == 2 && item.ischange" @click="gochangetime(item.order_id)">
              <view>去修改</view>
              <uni-icons type="right" size="15" color="#fff"></uni-icons>
            </view>
          </view>
        </view>
      </scroll-view>
      <!-- 优选名师 -->
      <view :class="{ title: true, top2: subjectlist.length == 0 }">优选名师</view>
      <view class="teachedbox">
        <view class="teacheritem" v-for="(item, index) in goodteacherlist" :key="item.id" @click="godetail(item.id)">
          <image :src="imgUrl + item.avatar" mode="aspectFill" style="width: 240rpx; height: 240rpx"></image>
          <view class="name">
            <view class="username">{{ item.byname }}</view>
            <view class="usercareer">{{ item.identity_name }}</view>
          </view>
          <view class="career">{{ item.host_subject }}教师</view>
        </view>
      </view>
      <view class="title" style="margin-top: 28rpx">推荐教师</view>

      <!-- 教师列表 -->
      <view class="teacherlist">
        <view class="listitem" v-for="item in tuijian" :key="item.id" @click="godetail(item.id)">
          <image :src="imgUrl + item.avatar" mode="aspectFill" style="width: 186rpx; height: 186rpx"></image>
          <view class="right">
            <view class="righttop">
              <view style="display: flex; align-items: center">
                <view class="username">{{ item.byname }}</view>
                <view class="usercareer">{{ item.identity_name }}</view>
              </view>
              <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 26rpx; color: #222222">{{ item.host_grade + '/' + item.host_subject }}</view>
            </view>
            <view class="rightmiddel">
              <view class="teachage">教龄{{ item.teaching_len }}年</view>
              <view class="money">￥{{ item.price }}/起</view>
            </view>
            <view class="rightbottom">
              <view class="hobbylist">
                <!-- <view class="hobbyitem"></view> -->
                <view class="hobbyitem" v-for="(item, index) in item.keyword" :key="index">{{ item }}</view>
              </view>
              <view class="long">{{ item.distance }}km</view>
            </view>
          </view>
        </view>
      </view>
      <view style="width: 750rpx; height: 100rpx"></view>
    </scroll-view>

    <!-- 邀请码 -->
    <uni-popup ref="invitecode" type="center">
      <view class="invitebox">
        <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 30rpx; color: #222222; text-align: center">邀请码</view>
        <input
          type="text"
          placeholder="输入邀请码"
          v-model="invitecode"
          style="box-sizing: border-box; width: 430rpx; height: 100rpx; background: #ffffff; margin-top: 50rpx; margin-bottom: 40rpx; padding-left: 30rpx"
        />
        <view style="display: flex; justify-content: space-evenly">
          <view class="invitevbtn" @click="$refs.invitecode.close()">无邀请码</view>
          <view class="invitevbtn" @click="okbtn">确定</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { qqmap } from '@/utils/qqmap.js';
import Vue from 'vue';
export default {
  data() {
    return {
      invitecode: '', // 邀请码
      isiphone: false,
      top: {
        paddingTop: '0rpx'
      },
      city: '',
      imgUrl: '',
      imglist: [], // 轮播图数据
      location: {}, // 用户的当前经纬度
      goodteacherlist: [], // 优秀教师列表
      tuijian: [], // 推荐教师列表
      subjectlist: [], // 带进行的课程
      timer: null,
      currenttime: '' // 当前的时间戳
    };
  },
  methods: {
    // 去修改
    gochangetime(id) {
      uni.navigateTo({
        url: '/parents/jixuyuyue/jixuyuyue?id=' + id
      });
    },
    // 获取用户信息
    async getuserinfo() {
      const res = await uni.$http.post('/user/profile');
      // console.log('用户信息', res);
      // this.userinfo = res.data.data;
      uni.setStorageSync('rzstatus', res.data.data.position_status);
    },
    // 获取轮播图
    async getswiperlist() {
      const res = await uni.$http.post('/news/banner', {
        type: 'student'
      });
      // console.log('轮播图数据', res.data.data);
      this.imglist = res.data.data.list;
    },
    // 跳转到轮播图详情
    goarticle(txt) {
      console.log(txt);
      uni.navigateTo({
        url: '/pages/swiperdetail/swiperdetail?txt=' + encodeURIComponent(txt)
      });
    },
    // 提交邀请码
    okbtn() {
      uni.$http
        .post('/Invitation/add', {
          code: this.invitecode
        })
        .then((res) => {
          // console.log('邀请码', res);
          if (res.data.code == 1) {
            this.$refs.invitecode.close();
          }
        });
    },
    // 跳转到教师详情
    godetail(id) {
      uni.navigateTo({
        url: '/parents/teacherdetail/teacherdetail?id=' + id
      });
    },
    // 跳转到教师入住
    gojsrz() {
      if (uni.getStorageSync('rzstatus') == 0) {
        uni.navigateTo({
          url: '/teacher/jsrz/jsrz'
        });
      } else if (uni.getStorageSync('rzstatus') == 1) {
        uni.navigateTo({
          url: '/pages/daishenhe/daishenhe'
        });
      } else if (uni.getStorageSync('rzstatus') == 3) {
        uni.navigateTo({
          url: '/pages/rzstatus/rzstatus?status=' + uni.getStorageSync('userinfo')
        });
      } else if (uni.getStorageSync('rzstatus') == 2) {
        uni.reLaunch({
          url: '/pages/index/index?status=' + 2
        });
      }
    },
    // 获取优秀教师列表
    async getgoodteacher() {
      const res = await uni.$http.post('/patriarch/armyTeacher');

      this.goodteacherlist = res.data.data.list;
      console.log('优秀教师列表', this.goodteacherlist);
    },
    // 获取用户当前的位置
    getuserloacl() {
      uni.getLocation({
        success: (res) => {
          let url = `https://apis.map.qq.com/ws/geocoder/v1/?location=`;
          this.$jsonp(url, {
            key: '5ZKBZ-M5CCV-M4EP2-5JRNX-KCZBQ-MCFA4',
            location: res.latitude + ',' + res.longitude,
            output: 'jsonp'
          }).then((res) => {
            console.log('jsonp地址解析', res);
            this.city = res.result.address_component.city;
            this.location = res.result.location;
            // 推荐教师列表
            this.gettjteacher();
          });

          // qqmap.reverseGeocoder({
          //   location: {
          //     latitude: res.latitude,
          //     longitude: res.longitude
          //   },
          //   success: (res) => {
          //     // console.log('地址已解析后的位置', res);
          //     this.city = res.result.address_component.city;
          //     this.location = res.result.location;
          //     // 推荐教师列表
          //     this.gettjteacher();
          //   }
          // });
        }
      });
    },
    // 跳转到定位页面
    goposition() {
      uni.navigateTo({
        url: '/parents/position/position'
      });
    },
    // 跳转到搜索页面
    gosearch() {
      uni.navigateTo({
        url: '/parents/search/search'
      });
    },
    // 跳转到学霸到家
    goxuebadaojia() {
      this.$emit('goxueba', 1);
    },
    // 获取推荐教师列表
    async gettjteacher() {
      // console.log('经纬度', this.location);
      const res = await uni.$http.post('/patriarch/getTeacherList', {
        lat: this.location.lat,
        lon: this.location.lng,
        teacher_id: ''
      });

      this.tuijian = res.data.data;
      console.log('推荐教师雷彪----', this.tuijian);
    },
    // 获取首页带进行的课程
    async getsubject() {
      const res = await uni.$http.post('/patriarch/index');
      console.log('首页的课程', res);
      this.subjectlist = res.data.data;
      this.subjectlist.forEach((item) => {
        Vue.set(item, 'ischange', false);
        if (item.agotime.agotimeIs == 2) {
          let current = new Date().getTime();
          new Date(item.agotime.agotime).getTime();
          if ((new Date(item.agotime.agotime).getTime() - current > 172, 800 * 1000)) {
            item.ischange = true;
          } else {
            item.ischange = false;
          }
        }
      });
      // week_time
    }
  },
  created() {
    // 获取用户信息
    if (uni.getStorageSync('token')) {
      this.getuserinfo();
    }

    // 获取轮播图
    this.getswiperlist();
    // 获取首页的带进行课程
    this.getsubject();
    this.timer = setInterval(() => {
      this.getsubject();
      this.currenttime = new Date().getTime();
      console.log(this.currenttime);
    }, 3000);
    // 获取用户当前位置
    this.getuserloacl();
    // 优秀教师列表
    this.getgoodteacher();

    // 配置头像的基地址
    this.imgUrl = this.imgurl;
    // 适配苹果的刘海
    const app = getApp();
    this.isiphone = app.$vm.isIPhone;
    if (this.isiphone) {
      if (app.$vm.isIPhone2) {
        this.top.paddingTop = app.$vm.liuhai + 50 + 'rpx';
      } else {
        this.top.paddingTop = app.$vm.liuhai + 'rpx';
      }
    }
  },
  async mounted() {
    // this.$refs.invitecode.open();
    if (uni.getStorageSync('userinfo').user_code == 1) {
      this.$refs.invitecode.open();
      const res = await uni.$http.post('/user/userCode');
      uni.setStorageSync('userinfo', res.data.data);
      console.log('弹框返回的数据', res);
    }
  },
  beforeDestroy() {
    console.log(1111);
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  destroyed() {
    console.log(1111);
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  }
};
</script>

<style lang="scss" scoped>
.top2 {
  margin-top: 280rpx;
}
.container {
  box-sizing: border-box;

  .headerbgc {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 750rpx;
    height: 180rpx;
    background: #3553e8;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    .ipt {
      box-sizing: border-box;
      position: absolute;
      left: 10rpx;
      width: 340rpx;
      height: 64rpx;
      background: #5d75ed;
      color: #fff;
      font-style: 26rpx;
      padding-left: 60rpx;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
    }
    /deep/ .txtwhiite {
      color: #fff !important;
      font-size: 26rpx !important;
    }
  }
  .itembox {
    position: absolute;
    margin-top: -35rpx;
    z-index: 4;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 30rpx 30rpx 0 0;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 30rpx 20rpx;
  }

  .title {
    box-sizing: border-box;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 30rpx;
    color: #000000;
    margin-left: 20rpx;
    margin-bottom: 26rpx;
  }
  .teachedbox {
    box-sizing: border-box;
    position: relative;
    display: flex;
    width: 750rpx;
    height: 320rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 4rpx 2rpx rgba(191, 191, 191, 0.16);
    border-radius: 20rpx;
    .teacheritem {
      box-sizing: border-box;
      position: relative;
      width: 240rpx;
      height: 320rpx;
      margin-left: 10rpx;
      .name {
        display: flex;
        align-items: center;
        .username {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #222222;
          margin: 16rpx 20rpx 24rpx;
        }
        .usercareer {
          box-sizing: border-box;
          width: 104rpx;
          height: 40rpx;
          background: #eaedfd;
          border-radius: 10rpx 10rpx 10rpx 10rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #3553e8;
          text-align: center;
          line-height: 40rpx;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
    .career {
      position: absolute;
      top: 0;
      left: 10rpx;
      box-sizing: border-box;
      width: 100rpx;
      height: 38rpx;
      line-height: 20rpx;
      background: #ff4f00;
      font-weight: 500;
      font-size: 20rpx;
      color: #ffffff;
      border-radius: 20rpx 0rpx 20rpx 0rpx;
      padding: 10rpx;
    }
  }
  .listtitle {
    box-sizing: border-box;
    width: 120rpx;
    height: 42rpx;
    font-size: 30rpx;
    margin: 20rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #000000;
  }
  .list {
    box-sizing: border-box;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 650rpx;
    height: 120rpx;
    margin-top: 30rpx;
    background: #eff2ff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .item2 {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 33%;
      // height: 120rpx;
      .top {
        font-size: 28rpx;
      }
      .bottom {
        font-size: 30rpx;
        text-align: center;
      }
    }
  }
  .teacherlist {
    .listitem {
      box-sizing: border-box;
      display: flex;
      width: 750rpx;
      height: 190rpx;
      padding: 0 27rpx;
      margin-bottom: 30rpx;
      .right {
        flex: 1;
        margin-left: 20rpx;
        .righttop {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .usercareer {
            box-sizing: border-box;
            width: 104rpx;
            height: 40rpx;
            background: #eaedfd;
            border-radius: 10rpx 10rpx 10rpx 10rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 22rpx;
            color: #3553e8;
            text-align: center;
            line-height: 40rpx;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .username {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #222222;
            margin-right: 14rpx;
          }
        }
        .rightmiddel {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 12rpx;
          .teachage {
            font-weight: 500;
            font-size: 26rpx;
            color: #222222;
          }
          .money {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 24rpx;
            color: #ff3400;
          }
        }
        .rightbottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 40rpx;
          .hobbylist {
            display: flex;
            align-items: center;
            .hobbyitem {
              box-sizing: border-box;
              height: 40rpx;
              background: #ffffff;
              border-radius: 20rpx 20rpx 20rpx 20rpx;
              border: 1rpx solid #3553e8;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 22rpx;
              color: #3553e8;
              margin-right: 10rpx;
              text-align: center;
              line-height: 30rpx;
              padding: 4rpx 12rpx;
              text-overflow: ellipsis; /* 溢出显示省略号 */
              overflow: hidden; /* 溢出隐藏 */
              white-space: nowrap; /* 强制不换行 */
            }
          }
          .long {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #222222;
          }
        }
      }
    }
  }
  .invitebox {
    box-sizing: border-box;
    padding: 40rpx;
    width: 510rpx;
    height: 400rpx;
    background: linear-gradient(162deg, #dbe1ff 0%, #eaeeff 49%, #ffffff 100%);
    border-radius: 20rpx;
    .invitevbtn {
      box-sizing: border-box;
      width: 210rpx;
      height: 90rpx;
      text-align: center;
      line-height: 90rpx;
      color: #fff;
      background: #3553e8;
      border-radius: 100rpx;
    }
  }
}
</style>
<style>
page {
  background-color: #fff;
}
</style>